<template>
  <div class="index">
    <div class="tabs flex-a">
      <div :class="state.tab == item.id ? 'active tab' : 'tab'" v-for="item in state.tabList" :key="item.id"
        @click="changeTab(item)">
        <div><img :src="state.tab == item.id ? item.active : item.url" alt=""></div>
        <div>{{ item.name }}</div>
        <i></i>
      </div>
    </div>
    <!-- <div class="switch flex-a flex-b">
      <div>自动接单</div>
      <div class="flex-a">
        <nut-switch v-model="state.checked" @change="change" />
        <span></span>
        <img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112949_11.png" alt="">
      </div>
    </div> -->
    <div class="list">
      <div class="order-detail" v-if="state.list.length > 0" v-for="item in state.list" :key="item.id">
        <div class="order-head flex-a flex-b">
          <div class="left flex-a">
            <span>#</span>
            <div>1</div>
            <div class="blue">尽快送达</div>
          </div>
          <div class="right">{{ item.state == 2 ? '进行中' : item.state == 4 ? '已完成' :
        item.state == -1 ? '已取消' : '' }}
          </div>
        </div>
        <div class="order-box">
          <div class="order-title flex-a flex-b">
            <div class="name">{{ item.vipName }}</div>
            <div class="flex-a">
              <!-- <img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112949_3.png" alt=""> -->
              <img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112948.png" alt="">
            </div>
          </div>
          <!-- <div class="info">第一次下单·收藏用户</div> -->
          <div class="addr">{{ item.datVipAddress.address + item.datVipAddress.detAddress
            }}
          </div>
          <!-- <div class="status flex-a flex-b">
                                    <div class="time flex-a">
                                        <div>12:18</div>
                                        <div>已送达（骑手:融资达）</div>
                                    </div>
                                    <div class="flex-a">
                                        <img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112949_18.png" alt="">
                                        <img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112948.png" alt="">
                                    </div>
                                </div>
                                <div class="process flex-a flex-b">
                                    <div class="flex-a"><span>展开进度</span>
                                        <RectDown color="#3B84F1" size="14" />
                                    </div>
                                    <div><nut-button type="default">我要索赔</nut-button></div>
                                </div> -->
          <div class="open flex-a flex-b">
            <div>一件商品</div>
            <!-- <div class="blue">展开</div> -->
          </div>
          <div class="total flex-a">
            <span>本单预计收入</span>
            <!-- <Ask color="#686B72" size="14" /> -->
            <nut-tag type="success">已支付</nut-tag>
            <div class="price">￥{{ item.price }}</div>
          </div>
          <div class="foot">
            <nut-button type="info" size="small" @click="sureArrive(item)">确认送达</nut-button>
          </div>
        </div>
      </div>
      <div v-else>
        <nut-empty description="暂无数据"></nut-empty>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro'
import { reactive, onMounted, onLoad } from 'vue';
import { CircleClose } from '@nutui/icons-vue-taro';
import { getNewList, toArrive } from '../../../api/index'
import { uploadUrl } from '../../../utils/index.js'
export default {
  components: {
    CircleClose
  },
  setup() {
    const state = reactive({
      checked: false,
      tab: '',
      uploadUrl: uploadUrl,
      tabList: [
        {
          id: '',
          url: 'https://cxj.szzkba.cn/upload/i/2024/03/18/102237_1.png',
          name: '新订单',
          active: 'https://cxj.szzkba.cn/upload/i/2024/03/18/102237.png'
        },
        // {
        //   id: 1,
        //   url: 'https://cxj.szzkba.cn/upload/i/2024/02/29/112949_17.png',
        //   name: '配送异常',
        //   active: 'https://cxj.szzkba.cn/upload/i/2024/02/29/112949_17.png'
        // },
        // {
        //   id: 2,
        //   url: 'https://cxj.szzkba.cn/upload/i/2024/02/29/112949_2.png',
        //   name: '催单',
        //   active: 'https://cxj.szzkba.cn/upload/i/2024/02/29/112949_2.png'
        // },
        {
          id: '-1',
          url: 'https://cxj.szzkba.cn/upload/i/2024/03/18/102237_3.png',
          name: '取消订单',
          active: 'https://cxj.szzkba.cn/upload/i/2024/03/18/102237_2.png'
        },
        {
          id: '-2',
          url: 'https://cxj.szzkba.cn/upload/i/2024/03/18/102237_4.png',
          name: '售后退款',
          active: 'https://cxj.szzkba.cn/upload/i/2024/03/18/102237_5.png'
        }
      ],
      list: []
    });
    onMounted(() => {
      getList({ state: '' })
      // Taro.startLocationUpdateBackground({
      //   success(res1) {
      //     console.log("开启前后台位置更新", res1)
      //     Taro.onLocationChange((res2) => {
      //       console.log("监听位置变化", res2)
      //     })
      //   }
      // })
    });
    const getList = (data) => {
      getNewList(data).then(res => {
        if (res.code == 200) {
          state.list = res.rows
        }
      })
    }
    const change = (val) => {

    }
    const changeTab = (item) => {
      state.tab = item.id
      getList({ state: item.id })
    }
    const sureArrive = (item) => {
      Taro.showModal({
        title: '提示',
        content: '确认上传送达照片？',
        success: function (res) {
          if (res.confirm) {
            Taro.getLocation({
              type: 'wgs84',
              success: function (res) {
                const latitude = res.latitude
                const longitude = res.longitude
                if (longitude.toFixed(4) == Number(item.lng).toFixed(4) && latitude.toFixed(4) == Number(item.lat).toFixed(4)) {
                  Taro.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
                    success: function (res) {
                      // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                      var tempFilePaths = res.tempFilePaths
                      console.log(tempFilePaths)
                      Taro.uploadFile({
                        url: state.uploadUrl, //仅为示例，非真实的接口地址
                        filePath: tempFilePaths[0],
                        name: 'file',
                        success(res) {
                          const data = res.data
                          console.log(JSON.parse(data).code)
                          if (JSON.parse(data).code == 200) {
                            let url = JSON.parse(data).url
                            toArrive({ orderNo: item.orderNo, picture: url }).then(res => {
                              if (res.code == 200) {
                                Taro.showToast({
                                  title: '已确认送达',
                                  icon: 'success',
                                  duration: 2000
                                })
                                getList({ state: '' })
                              }
                            })
                          }
                          //do something
                        }
                      })
                    }
                  })
                } else {
                  Taro.showToast({
                    title: '请前往取餐',
                    icon: 'error',
                    duration: 2000
                  })
                }
              }
            })
          } else if (res.cancel) {
            Taro.getLocation({
              type: 'wgs84',
              success: function (res) {
                const latitude = res.latitude
                const longitude = res.longitude
                if (longitude.toFixed(4) == Number(item.lng).toFixed(4) && latitude.toFixed(4) == Number(item.lat).toFixed(4)) {
                  toArrive({ orderNo: item.orderNo, picture: null }).then(res => {
                    if (res.code == 200) {
                      Taro.showToast({
                        title: '已确认送达',
                        icon: 'success',
                        duration: 2000
                      })
                      getList({ state: '' })
                    }
                  })
                } else {
                  Taro.showToast({
                    title: '请前往取餐',
                    icon: 'error',
                    duration: 2000
                  })
                }
              }
            })
          }
        }
      })
    }
    return { state, change, changeTab, getList, sureArrive };
  }
};
</script>
<style lang="scss">
.index {
  .tabs {
    background: #3F8EE3;
    padding: 0 30rpx;
    box-sizing: border-box;

    .tab:nth-child(1) {
      img {
        transform: scale(1.2);
      }
    }

    .tab {
      width: 33.33%;
      color: #BCDDF6;
      text-align: center;
      font-size: 26rpx;

      img {
        width: 60rpx;
        height: 60rpx;
      }

      i {
        width: 0;
        height: 0;
        border: 12px solid;
        border-color: transparent transparent #fff transparent;
        opacity: 0;
        position: relative;
        top: -12rpx;
      }
    }

    .tab.active {
      color: #fff;

      i {
        opacity: 1;
      }
    }
  }

  .switch {
    background: #FFFFFF;
    padding: 20rpx;
    box-sizing: border-box;

    span {
      display: inline-block;
      width: 1rpx;
      height: 40rpx;
      background: #EDEDED;
      margin: 0 10rpx;
    }

    img {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .list {
    padding: 15rpx 20rpx 120rpx !important;
    background: #F0F0F0;

    .order-detail {
      background: #ffff;
      border-radius: 5rpx;
      margin-bottom: 20rpx;

      .order-head {
        padding: 20rpx;

        .left {
          color: #2D2D2D;
          font-size: 50rpx;

          span {
            font-size: 26rpx;
          }

          .blue {
            color: #4495E4;
            font-size: 28rpx;
            margin-left: 20rpx;
          }
        }

        .right {
          color: #6C6C6C;
        }
      }

      .order-box {
        padding: 0 30rpx 30rpx 30rpx;

        .order-title {
          border-top: 1rpx solid #ECECEC;
          padding-top: 20rpx;

          .name {}

          img {
            width: 50rpx;
            height: 50rpx;
            margin-left: 20rpx;
          }
        }

        .info {
          color: #9B9B9B;
          font-size: 22rpx;
          margin: 30rpx 0 10rpx;
        }

        .addr {
          color: #838383;
          font-size: 30rpx;
          width: 70%;
          padding-bottom: 20rpx;
        }

        .status {
          border-top: 1rpx solid #ECECEC;
          padding-top: 20rpx;

          .time {
            color: #878787;

            div {
              margin-right: 20rpx;
            }
          }

          img {
            width: 50rpx;
            height: 50rpx;
            margin-left: 20rpx;
          }
        }

        .process {
          color: #3B84F1;
          padding: 20rpx 0;
          border-bottom: 1rpx solid #ECECEC;

          span {
            margin-right: 10rpx;
          }

          .nut-button {
            border-color: #3B84F1;
            color: #3B84F1;
            transform: scale(0.8);
          }
        }

        .open {
          padding: 30rpx 0;
          border-bottom: 1rpx solid #ECECEC;
          font-size: 30rpx;
          color: #4F4F4F;

          .blue {
            color: #3B84F1;
            font-size: 26rpx;
          }
        }

        .total {
          padding: 30rpx 0;
          font-size: 28rpx;
          justify-content: flex-end;

          span {
            color: #3F3F3F;
            margin-right: 10rpx;
          }

          .nut-tag {
            margin: 0 30rpx 0 20rpx;
          }

          .price {
            color: #E0A336;
          }
        }

        .foot {
          padding-top: 20rpx;
          border-top: 1rpx solid #ECECEC;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }
    }
  }
}
</style>